<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%--<%@ taglib prefix="c" uri="/WEB-INF/tld/c.tld" %>--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
<title>测试七牛上传图片</title>
</head>
<body>

<div th:text="'欢迎你'+${session.login.loginName}">这是谁</div>
<a th:href="@{/logout}">退出登录</a>




<div  >
	<input type="file" name="FileUpload" id="FileUpload">
	<a class="layui-btn layui-btn-mini" id="btn_uploadimg">上传视频</a>
</div>
　　
<%--<table width="100"   bgcolor="black">--%>
	<%--<div class="panel-heading">${aaa}赛哥   任务管理系统-登录</div>--%>
	<%--<form action="/admin/yxbb/qiniu" method="post" enctype="multipart/form-data">--%>
		<%--<input type='text'  name='textfield' id='textfield' class='txt' />--%>
		<%--<input type="file" name="file" class="file" id="fileField"--%>
			   <%--size="28" onchange="document.getElementById('textfield').value=this.value" />--%>
		<%--&lt;%&ndash;<input type="submit" onclick="submitForm"  name="submit" class="btn" value="上传" />&ndash;%&gt;--%>
	<%--</form>--%>
<%--</table>--%>
<%--<table width="100"   bgcolor="black">--%>
	<%--<div class="panel-heading">上传视频</div>--%>
	<%--<form action="" method="post" enctype="multipart/form-data">--%>
		<%--<input type='text'  name='videofield' id='videofield' class='txt' />--%>
		<%--<input type="file" name="file" class="file" id="vfileField"--%>
			   <%--size="28" onchange="document.getElementById('videofield').value=this.value" />--%>
		<%--<input type="button" onclick="submitForm()"  class="btn" value="上传" />--%>
	<%--</form>--%>
<%--</table>--%>
<div>
	<video id="myVideo" src="" controls="controls">
		your browser does not support the video tag
	</video>
</div>

<div id="flvPlayDiv"></div><!--视频播放的div区域 -->

</body>
<script type="text/javascript" src="http://yandex.st/swfobject/2.2/swfobject.min.js"></script>
<script type="text/javascript" src="static/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">

    function PlayFlv(filename) {
        var videoname = filename; //视频文件名
        var floder = "http://pezfktcw4.bkt.clouddn.com/201809141008104c5hw0sw.flv"; //存放Flash视频的文件夹,注意是相对flvplayer.swf文件的位置（images/flvplayer.swf）
        var div = document.getElementById("flvPlayDiv");
        div.innerHTML = "<img src='images/wait.gif' alt=''>"; //增加等待图片已增加用户体验;
        div.style.display = "none";
        var result = "<table align='center'><tr><td align='center'><object type='application/x-shockwave-flash' width='640px' height='480px' ";
        result += "data='flvplayer.swf?file=" + floder + "/" + filename + "'>";
        result += "<param name='movie' value='images/flvplayer.swf?file=" + floder + "/" + filename + "&showfsbutton=true&autostart=true' />";
        result += "<param name='wmode' value='transparent' />";
        result += "<param name='quality' value='high' />";
        result += "<param name='allowfullscreen' value='true' />";
        result += "<param name='autostart' value='true' />";
        result += "</object></td></tr></table> ";
        div.innerHTML = result;
        div.style.display = "inline"; //div显示方式
    }


    $(function () {
        $("#btn_uploadimg").click(function () {
            var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
            if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
                alert("请选择视频");
                return;
            }
            var formFile = new FormData();
            formFile.append("action", "UploadVMKImagePath");
            formFile.append("file", fileObj); //加入文件对象

            //第一种  XMLHttpRequest 对象
            //var xhr = new XMLHttpRequest();
            //xhr.open("post", "/Admin/Ajax/VMKHandler.ashx", true);
            //xhr.onload = function () {
            //    alert("上传完成!");
            //};
            //xhr.send(formFile);

            //第二种 ajax 提交

            var data = formFile;
            $.ajax({
                url: "/admin/yxbb/upload/test",
                data: data,
                type: "Post",
                dataType: "json",
                cache: false,//上传文件无需缓存
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须
                success: function (data) {
                    console.log(data.data)
                    $("#myVideo").attr('src',data.data);//aId是你a标签的id，data是你ajax返回的值
                    alert("上传完成!");
                },
            })
        })
    })


</script>

</html>